import { defineStore } from "pinia";
import { reactive, watch } from "vue";

// 大屏基础配置信息
export const useSketchRuleStore = defineStore("sketchRule", () => {
	const sketchRuleState = reactive({
		id: "", // 大屏id
		// 尺子参数配置, 参考官网 https://github.com/kakajun/vue3-sketch-ruler
		rulerOpts: {
			thick: 20, // 尺子的厚度
			width: 1920, // 大屏实际宽(初始值)
			height: 1080, // 大屏实际高(初始值)
			canvasWidth: 1920, // 画布宽
			canvasHeight: 1080, // 画布高
			showRuler: true, // 是否显示尺子
			isShowReferLine: false, // 是否显示标线
			paddingRatio: 0.05, // 刻度分散比例(缩放倍率) -> 画布实际缩放了1 - paddingRatio
			showShadowText: false, // 是否显示阴影文字
			palette: {
				// 标尺的样式配置参数
				bgColor: "transparent",
			},
			shadow: {
				// 阴影配置
				x: 0,
				y: 0,
				width: 1920,
				height: 1080,
			},
		},
		// 尺子内部容器的配置
		canvasOpts: {
			canvasName: "画布", // 大屏的名称
			canvasSacle: 1, // 画布的实际缩放比
			canvasBgColor: "#f6f6f7", // 大屏canvas背景色
			canvasBgImage: "", // 大屏canvas图片
		},
		tabsState: {
			activeKey: "styles",
			type: 'page',
			tabList: [{ key: "styles", label: "样式" }],
		}
	});

	// 保持尺子的阴影跟画布的大小一致
	watch(
		[
			() => sketchRuleState.rulerOpts.canvasWidth,
			() => sketchRuleState.rulerOpts.canvasHeight,
		],
		(newValue) => {
			if (newValue) {
				sketchRuleState.rulerOpts.shadow.width = newValue[0];
				sketchRuleState.rulerOpts.shadow.height = newValue[1];
			}
		}
	);

	return {
		sketchRuleState,
	};
});
